一覧に戻る

MapLibre GL JS v5(pre)で月を球体表示する

#TypeScript#foss4g#MapLibre

はじめに

MapLibreとは

MapLibre Official WebSite https://maplibre.org

  • Web地図に関するプロダクトをOSSとして開発・メンテナンスしているOrganizationです
  • ブラウザ・モバイル向けの地図ライブラリおよび地図配信に関するツール群があります

MapLibre User Group Japan (MUG-JP) とは

MUG-JP Official Web Site https://mug-jp.org/

  • MapLibreプロダクトの開発者によるユーザーコミュニティです
  • ナレッジの共有やイベントの開催による普及活動を行なっています

月が綺麗ですね

https://kanahiro.github.io/moon-viewer/

MapLibre GL JS v5のGlobe Projection

MapLibre GL JSがv5でついにGlobe Projection(地球儀ビュー)をサポートします。 現状はpre releaseでインタラクションに若干不具合がありますが、レンダリングは問題なさそうです。

以前はMapbox GL JSで実装していた

Mapbox GL JSはもっと早い段階でGlobe Projectionをサポートしていて、以前はこちらを利用していました。

Mapbox GL JSでもGlobe Projectionで同等のレンダリングが出来るわけですが、自前で変換したりしている月面データは(地球とは色々事情が違うため)けっこう特殊な作りをしているからか、Mapbox GL JSだと一部のレンダリングで不具合が出て、ズームレベルが高い時はmercator projectionに切り替えるようなワークアラウンドをしていました。

一方、MapLibre GL JSはそういったことがなく快適にレンダリング出来ています。素晴らしい!

データの諸元などは以下をご覧ください。

https://zenn.dev/mierune/articles/ef0f485534d26f

コード

https://github.com/Kanahiro/moon-viewer

// styleに直接かけそうなものだが、pre.7で試したときはそうではなかった
map.on('load', () => map.setProjection({ type: 'globe' }));

余談:タイルサーバー

月面の画像とDEMは自前のタイルサーバーから配信しています(外部利用不可)。PMTiles + Cloudflare R2 + Workersで運用しており、多少のストレージ代だけで運用出来ています。

以下の記事に沿うと簡単にPMTilesバックエンドなタイルサーバーを構築できます。

https://docs.protomaps.com/deploy/cloudflare